<!-- 我的积分 -->
<template>
	<view>
		<uv-sticky :customNavHeight="navh">
			<view class="tn-gradient-bg__cool-2">
				<view class="flex-x tn-p tn-white_text flex-x-between">
					<text>我的足迹，共有 {{ total || 0 }} 条记录</text>
					<view @click="clear">清 空</view>
					<uv-button type="primary" :plain="true" size="mini" shape="circle" :hairline="true" text="细 边" />
				</view>
			</view>
		</uv-sticky>

		<view class="tn-p">

			<template v-for="(item, index) in list" :key="index">

				<view class="ta-card flex-x flex-x-between">
					<view class="flex-x flex-align-center tn-m-sm" @click="goto.goods(item.gcode)">
						<uv-image :src="item.goods.cover" height="100rpx" width="100rpx" radius="10rpx" :lazy-load="true" />
						<view class="flex flex-y tn-pl-sm">
							<view class="flex-x">
								<text>{{ item.goods.name }}</text>
							</view>
							<view class="flex-x tn-text-sm tn-mt-sm ta-desc-text flex-align-center">
								已售 {{ Number(item.goods.stock_sales) + Number(item.goods.stock_virtual) }} 件，
								<text>售价</text>
								<uv-text mode="price" type="error" :text="item.goods.price_selling" />
							</view>
						</view>
					</view>
					<view class="tn-p-xs" @click="del(item.gcode, index)">
						<uv-icon name="close" color="error" />
					</view>
				</view>
			</template>

			<view v-if="list.length < 1" style="padding:300rpx 0">
				<uv-empty mode="list" text="~暂无数据~" icon="/static/imgs/empty/car.png" />
				<view class="tn-mt-xl flex-center">
					<uv-button @click="goto.back()" shape="circle" text="上一页" />
				</view>
			</view>

			<view v-else class="tn-mt">
				<uv-load-more :status="more" @loadmore="loadData" />
			</view>

		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { TaDataActionHistory, TaToast, TaUseAccount } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			navh: <number>0,
			page: <number>0,
			more: <any>'loadmore',
			list: <any[]>[],
			total: <number>0
		}
	},
	onShow() {
		this.loadData();
	},
	onReachBottom() {
		if (this.more === 'loadmore') {
			this.loadData()
		}
	},
	onPullDownRefresh() {
		this.loadData(true);
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 删除记录
		del(gcode: string, idx: number) {
			TaToast.confirm('确认要删除该记录吗？').then(() => {
				TaDataActionHistory.del(gcode).then(() => {
					this.list.splice(idx, 1) && this.total--
				})
			})

		},
		// 清空记录
		clear() {
			TaToast.confirm('确认要清空足迹吗？').then(() => {
				TaDataActionHistory.clear().then(() => this.loadData(true))
			})
		},
		// 加载地址
		loadData(force: boolean = false) {
			if (force) {
				this.list = <any[]>[]
				this.page = <number>0
			}
			this.more = 'loading'
			TaDataActionHistory.get({ page: ++this.page }).then((ret: any) => {
				this.total = ret.data.page.total || 0
				if (ret.data.list.length > 0) {
					this.more = 'loadmore'
					this.page = ret.data.page.current || 0
					this.list = this.list.concat(ret.data.list)
				}
				if (ret.data.page.total <= this.list.length) {
					this.more = 'nomore'
				} else if (this.list.length <= 0) {
					this.more = 'empty'
				}
			})
		}
	}
})
</script>